<template>
  <div>
    <el-breadcrumb>
      <el-breadcrumb-item>
        <span class="headerSpan"></span>参数列表
        <el-button size="small" icon="el-icon-refresh" @click="getParmData()" class="refreshBtn">刷新</el-button>
        <el-button size="small" icon="el-icon-arrow-left" class="backBtn" @click="$router.go(-1)">返回</el-button>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 表格区域 -->
    <div class="tableCont">
      <el-table style="width: 100%" :data="specData">
        <el-table-column>
          <template slot="header">
            <div class="tableHeader">
              <i class="el-icon-s-unfold"></i>
              <span>数据列表</span>
              <el-button @click="$router.push('/goods/parameter/addparm')">添加</el-button>
            </div>
          </template>
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="id" label="编号"> </el-table-column>
          <el-table-column prop="name" label="参数名称"> </el-table-column>
          <el-table-column prop="templateId" label="模板"> </el-table-column>
          <el-table-column prop="options" label="可选值列表"> </el-table-column>
          <el-table-column prop="seq" label="排序"> </el-table-column>
          <el-table-column label="操作" width="100px">
            <template slot-scope="scope">
              <div class="cz">
                <a href="javascript:;" @click="$router.push('/goods/parameter/addparm?id=' + scope.row.id)">编辑</a>
                <a href="javascript:;" @click="deleteClassify(scope.row.id)">删除</a>
              </div>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryuserInfo.current"
        :page-size="queryuserInfo.pageSize"
        :page-sizes="[1, 2, 5, 10]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
      <!-- 转移商品弹出框 -->
      <el-dialog title="转移商品" :visible.sync="dialogVisible" width="50%">
        <div class="myDialog">
          <div>
            <el-form ref="rawForm" :model="rawForm">
              <el-form-item label="原商品分类:">
                <el-select v-model="rawForm.name" placeholder="请选择商品分类">
                  <el-option :label="rawForm.name" value="name"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <div>
            <el-form ref="targetForm" :model="targetForm">
              <el-form-item label="目标商品分类:">
                <el-select v-model="targetForm.name" placeholder="请选择商品分类">
                  <el-option label="区域一" value="shanghai"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">开始转移</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      queryuserInfo: {
        id: this.$route.query.id,
        Page: 1,
        size: 10
      },
      specData: [],
      total: null,
      dialogVisible: false,
      rawForm: {},
      targetForm: {}
    }
  },
  methods: {
    async getParmData() {
      const { data: res } = await this.$http.get('/spec/search', {
        params: this.queryuserInfo
      })
      console.log(res)
      if (res.code !== 200) {
        return
      }
      console.log(res)
      this.specData = res.data.data.rows
      this.total = res.data.data.total - 0
    },

    handleSizeChange(newSize) {
      // console.log(newSize)
      this.queryuserInfo.pagesize = newSize
      this.getClassifyData()
    },
    handleCurrentChange(newPagenum) {
      this.queryuserInfo.pagenum = newPagenum
      this.getClassifyData()
    },
    modifyState(row) {
      console.log(row)
    },
    async deleteClassify(id) {
      const isDel = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      console.log(isDel)
      if (isDel !== 'confirm') {
        return this.$message.info('您取消了删除')
      }
      const { data: res } = await this.$http.delete('/spec', { id: id })
      // console.log(id)

      if (res.result.code !== '200') {
        return
      }
      console.log(res)
      this.$message.success('删除成功')
    },
    shiftGoods(value) {
      this.rawForm = value
      this.dialogVisible = true
    }
  },
  created() {
    this.getParmData()
  }
}
</script>
<style lang="less" scoped>
.tableHeader {
  position: relative;
  height: 35px;
  line-height: 35px;
  span {
    padding-left: 5px;
  }

  .el-button {
    position: absolute;
    top: 0;
    right: 10px;
    height: 30px;
    line-height: 0;
  }
}
.classifySetting {
  a:nth-child(2) {
    padding: 0 20px;
  }
}
.cz {
  a:nth-child(2) {
    padding-left: 20px;
  }
}
.goodsNum {
  color: #20a5ff;
}
.goodsNum:hover {
  text-decoration: underline;
}
.myDialog {
  display: flex;
  .el-form {
    margin-left: 50px;
  }
}
</style>
